<template>
  <div class="timeline-container">
    <!-- 时间轴线 -->
    <div class="timeline-line"></div>

    <!-- 时间节点 -->
    <div v-for="(time, index) in timePoints" :key="index" class="time-node" :style="{ top: getPosition(time) + 'px' }">
      <div class="time-label">{{ time }}</div>
      <div class="node-dot"></div>
    </div>

    <!-- 时间段区块 -->
    <div v-for="(slot, index) in timeSlots" :key="'slot-' + index" class="time-slot" :style="slot.style">
      <div class="slot-name">{{ slot.name }}</div>
      <div class="slot-time">{{ slot.start }} - {{ slot.end }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  timePoints: string[];  // ["08:00", "12:00", "13:00", "14:00"]
  names: string[];       // 名称数组
}>();

// 将时间转换为分钟数
const parseTime = (time: string) => {
  const [hours, minutes] = time.split(':');
  return parseInt(hours) * 60 + parseInt(minutes);
};

// 计算位置（总高度500px对应24小时）
const getPosition = (time: string) => {
  const minutes = parseTime(time);
  return (minutes / 1440) * 500;
};

// 生成时间段数据
const timeSlots = computed(() => {
  const slots = [];
  for (let i = 0; i < props.timePoints.length; i++) {
    const start = props.timePoints[i];
    const end = i < props.timePoints.length - 1
      ? props.timePoints[i + 1]
      : '24:00';

    slots.push({
      name: props.names[i],
      start,
      end,
      style: {
        top: `${getPosition(start)}px`,
        height: `${(parseTime(end) - parseTime(start)) / 1440 * 500}px`,
        background: 'linear-gradient(90deg, #00E3FE 0%, rgba(0,200,226,0) 100%)'
      }
    });
  }
  return slots;
});
</script>

<style lang="scss" scoped>
.timeline-container {
  position: relative;
  height: 500px;
  margin: 20px 40px;
}

.timeline-line {
  position: absolute;
  left: 100px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #ddd;
}

.time-node {
  position: absolute;
  left: 70px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #00E3FE;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.time-label {
  font-size: 14px;
  color: #666;
}

.time-slot {
  position: absolute;
  left: 120px;
  right: 20px;
  border-left: 3px solid #00E3FE;
  padding: 12px;
  background: rgba(0, 227, 254, 0.1);
}

.slot-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.slot-time {
  font-size: 12px;
  color: #666;
}
</style>